import React, { useState,useEffect } from 'react';
import { Table, Button, Space, Tag, Modal, message} from 'antd';
import { menuStore } from './store/menuStore';
import { observer } from 'mobx-react-lite';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import * as Icons from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import MenuForm from './components/MenuForm';
import { Menu } from './store/menuTypes';

const MenuList: React.FC = observer(() => {
  useEffect(() => {
    menuStore.fetchMenus();
  }, []);
  
  const navigate = useNavigate();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingMenu, setEditingMenu] = useState<Menu | null>(null);
  const [modalType, setModalType] = useState<'create' | 'edit' | 'view'>('create');

  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName',
    },
    {
      title: '菜单编码',
      dataIndex: 'menuCode',
      key: 'menuCode',
    },
    // {
    //   title: '上级菜单',
    //   dataIndex: 'parentId',
    //   key: 'parentId',
    // },
    {
      title: '菜单路径',
      dataIndex: 'menuUrl',
      key: 'menuUrl',
    },
    {
      title: '菜单图标',
      dataIndex: 'menuIcon',
      key: 'menuIcon',
      render: (menuIcon: string) => (
        menuIcon ? React.createElement((Icons as any)[menuIcon]) : null
      )
    },
    {
      title: '菜单类型',
      dataIndex: 'menuType',
      key: 'menuType',
      render: (menuType: string) => (
        <Tag color={menuType === 'front' ? 'success' : 'error'}>
          {menuType === 'front' ? '前台' : '后台'}
        </Tag>
      ),
    },
    {
      title: '显示顺序',
      dataIndex: 'menuOrder',
      key: 'menuOrder',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'success' : 'error'}>
          {status === 'active' ? '启用' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Menu) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            disabled
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            disabled
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const handleCreate = () => {
    setModalType('create');
    setEditingMenu(null);
    setIsModalVisible(true);
  };

  const handleEdit = (record: Menu) => {
   
    setModalType('edit');
    setEditingMenu(record);
    setIsModalVisible(true);
  };

  const handleView = (record: Menu) => {
    setModalType('view');
    setEditingMenu(record);
    setIsModalVisible(true);
  };

  const getMenu = async (record: Menu) => {
    try {
      const menuData = await menuStore.getMenu(record.id);
      setEditingMenu(menuData); // 使用返回的用户数据
      setIsModalVisible(true);
    } catch (error) {
      console.error('获取用户详情失败:', error);
      message.error('获取用户详情失败');
    }
  }; 

  const handleDelete = (record: Menu) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除菜单 ${record.menuName} 吗？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        menuStore.deleteMenu(record.id);
        message.success('删除成功');
      },
    });
  };

  const handleModalClose = () => {
    setIsModalVisible(false);
    setEditingMenu(null);
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={handleCreate}
        >
          新建菜单
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={Array.isArray(menuStore.menus) ? menuStore.menus : []}
        rowKey="id"
        loading={menuStore.loading}
        locale={{ emptyText: '暂无数据' }}
      />

      <Modal
        title={
          modalType === 'create'
            ? '新建菜单'
            : modalType === 'edit'
            ? '编辑菜单'
            : '查看菜单'
        }
        open={isModalVisible}
        onCancel={handleModalClose}
        footer={null}
        width={800}
        destroyOnClose
      >
        <MenuForm
          type={modalType}
          initialValues={editingMenu}
          onCancel={handleModalClose}
        />
      </Modal>
    </div>
  );
});

export default MenuList; 